import React from 'react';
import styles from './index.less';
import IconFont from '@/components/IconFont';
import { Menu, Dropdown } from 'antd';

interface DropdownMenuType<T> {
  key: string | number;
  name: string;
  icon?: string | React.ReactNode;
  visible?: boolean;
  className?: string;
  onClick?: (record: T) => void;
}
const DropdownMenu = <T extends {}>({
  record,
  typeProps,
}: {
  record: T;
  typeProps: DropdownMenuType<T>[];
}) => {
  const menu = () => {
    const onClick = async ({ key }: { key: string }) => {
      typeProps.forEach((item: DropdownMenuType<T>) => {
        if (item.key === key) {
          item.onClick && item.onClick(record);
        }
      });
    };

    return (
      <Menu onClick={onClick}>
        {typeProps.map((item: DropdownMenuType<T>) => {
          if (typeof item.visible === 'boolean' && !item.visible) {
            return null;
          }
          return (
            <Menu.Item key={item.key}>
              {item.icon && typeof item.icon === 'string' && (
                <IconFont
                  type={item.icon}
                  style={{ fontSize: '16px' }}
                  className={item.className || ''}
                />
              )}
              <span>{item.name || ''}</span>
            </Menu.Item>
          );
        })}
      </Menu>
    );
  };
  return (
    <Dropdown overlay={menu()} key={'dropdownMenu'}>
      <a key={'operation'} className={styles['operation']}>
        <IconFont type={'iconcaozuo2'} />
      </a>
    </Dropdown>
  );
};
export default DropdownMenu;
